<template>
  <div class="Dragbox">
    <draggable
      class="box"
      v-model="list"
      @start="drag = true"
      @end="drag = false"
    >
      <div
        v-for="item in list"
        :key="item.id"
        class="itembox"
        :style="{ [borderColor]: item.color }"
      >
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
//拖拽组件
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      borderColor: "border-color",
      list: [
        { id: 1, name: "Item 1", color: "#\e60000" },
        { id: 2, name: "Item 2", color: "#00cc00" },
        { id: 3, name: "Item 3", color: "#1a8cff" },
        { id: 4, name: "Item 4", color: "#ffff00" },
        { id: 5, name: "Item 5", color: "#ff1a8c" },
        { id: 6, name: "Item 6", color: "#ff6600" },
        // ...
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.Dragbox {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  box-sizing: border-box;
  padding: 20px;
  .box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: space-around;
    .itembox {
      // width: 540px;
      width: calc(100% / 3 - 40px);
      // height: 44%;
      height: calc(100% / 2 - 40px);
      // border: 3px solid red;
      border: 4px solid;
      border-radius: 10px;
      display: flex;
       box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      justify-content: center;
      align-items: center;
      font-size: 40px;
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
